<template>
  <Container class="brand-list">
    <div slot="header" class="container-header large">
      <Form class="search">
        <Row>
          <Col span="6">
            <FormItem label="打卡人">
              <Input v-model="list.form.operatorName" class="storeNmae" clearable placeholder="请输入打卡人" />
            </FormItem>
            <FormItem label="门店维护人">
              <Input v-model="list.form.storeMaintainerName" class="storeNmae" clearable placeholder="请输入门店维护人" />
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="科室">
              <Select v-model="list.form.officeId" clearable filterable @on-change="setDepartment">
                <Option v-for="(item, index) of reportDepart" :value="item" :key="index">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="签到时间">
              <DatePicker v-model="list.form.date" :clearable="true" format="yyyy-MM-dd" type="daterange" placement="bottom-start" placeholder="选择日期" />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="部门">
              <Select v-model="list.form.depId" clearable filterable @on-change="setDistribute">
                <Option v-for="(item, index) of list.departments" :key="index" :value="item.id">{{item.name}}</Option>
              </Select>
            </FormItem>
            <FormItem label="选择门店">
              <StoreSelect 
                ref="store"
                v-model="list.form.storeId" 
                :src="src" 
                :distributorId="list.form.distributorIds" 
              ></StoreSelect>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="经销商">
              <DistributorSelect 
                v-model="list.form.distributorIds"
                @onchange="refresh"></DistributorSelect>
            </FormItem>
          </Col>
          <Col class-name="search" span="2">
            <Button
              class="btn-search large"
              type="primary"
              icon="ios-search"
              @click="onSearchBtnClick"
            />
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <export-btn 
        :param="exportParam" 
        url='/salesman/inspection/store_visit/export'
        class="item" 
        slot="extra"></export-btn>
      <TabPane label="门店拜访统计" name="tab1">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~"
        />
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            show-sizer
            placement="top"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
          />
        </div>
        <Loader :status="list.status" @refresh="getData" />
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from '@/table'
import { mapGetters } from 'vuex'
import VisitListData from './list/VisitListData'
import StoreSelect from '~/StoreSelect'
import DistributorSelect from '~/DistributorSelect'
import { clearEmpty, formatDate } from '@/util'
export default {
  name: 'report/visit/list',
  components: {
    StoreSelect,
    DistributorSelect
  },
  data () {
    return {
      src: '/common/store/listStores',
      storeId: this.$route.query.storeId ? this.$route.query.storeId : '',
      storeName: this.$route.query.storeName ? this.$route.query.storeName : '',
      tab: 'tab1',
      list: VisitListData,
      options: {
        tableHeight: 300
      }
    }
  },
  mounted () {
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.$store.dispatch('getListDepartmentTree')
    this.initTable()
    this.getData()
    this.$bus.$on('onDetail', ({ item }) => this.onDetail(item))
    if (this.storeId && this.storeName) {
      this.list.form.storeId = this.storeId
    }
  },
  destroyed () {
    this.$bus.$off()
  },
  computed: {
    ...mapGetters([
      'reportDepart'
    ])
  },
  methods: {
    ...table,
    setDepartment(row) {
      if (!row) {
        this.list.form.officeId = {}
        this.list.form.depId = null
        this.list.departments = []
        this.list.form.distributorIds = []
        this.list.distributors = []
      } else {
        this.list.departments = row.children
      }
    },
    setDistribute(id) {
      this.list.form.distributorIds = []
      if (id) {
        this.$store.dispatch('getDistributorDepartment', {departId: id}).then(res=> {
          this.list.distributors = res
        })
      } else {
        this.list.distributors = []
      }
    },
    onSearchBtnClick (type) {
      if (type === 1) {
        this.storeId = ''
      }
      this.list.currentPage = 1
      this.getData()
    },
    getData () {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        operatorName: this.list.form.operatorName,
        storeMaintainerName: this.list.form.storeMaintainerName,
        storeId: this.list.form.storeId ? this.list.form.storeId : this.storeId,
        officeId: this.list.form.officeId ? this.list.form.officeId.id : '',
        depId: this.list.form.depId,
        distributorIds: this.list.form.distributorIds ? [this.list.form.distributorIds] : null,
      }
      if (this.list.form.date[0] && this.list.form.date[1] && this.list.form.date.length) {
        param.beginEnterTime = formatDate(this.list.form.date[0]) + ' 00:00:00'
        param.endEnterTime = formatDate(this.list.form.date[1]) + ' 23:59:59'
      }
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$jsonPost('/salesman/inspection/store_visit/page', param).then(data => {
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || []).map(item => {
          return {
            id: item.id,
            officeName: item.officeName,
            depName: item.depName,
            distributorName: item.distributorName,
            storeName: item.storeName,
            storeMaintainerName: item.storeMaintainerName,
            enterTime: item.enterTime,
            leaveTime: item.leaveTime,
            operatorName: item.operatorName,
            durationOfStay: item.durationOfStay,
            storeTypeName: item.storeTypeName,
            storePhone: item.storePhone,
          }
        })
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    refresh(val) {
      this.$refs.store.getDetailData()
    },
    onPageChange (number) {
      this.list.currentPage = number
      this.$router.push({
        name: 'report/visit/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    },
    onPageSizeChange (pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.$router.push({
        name: 'report/visit/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    },
    onDetail (row) {
      this.$router.push({ 
        name: 'report/visit/detail', 
        query: {
          id: row.id
        }
      })
    }
  },
  watch: {
    $route () {
      let page = ~~this.$route.query.currentPage
      let table = this.list
      if (table.currentPage !== page) {
        table.currentPage =
          ~~this.$route.query.currentPage === 0
            ? 1
            : ~~this.$route.query.currentPage
        this.getData()
      }
    }
  },
  computed: {
    exportParam() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        operatorName: this.list.form.operatorName,
        storeMaintainerName: this.list.form.storeMaintainerName,
        storeId: this.list.form.storeId ? Number(this.list.form.storeId) : null,
        officeId: this.list.form.officeId ? this.list.form.officeId.id : '',
        depId: this.list.form.depId,
        distributorIds: this.list.form.distributorIds ? this.list.form.distributorIds : null,
      }
      if (this.list.form.date[0] && this.list.form.date[1] && this.list.form.date.length) {
        param.beginEnterTime = formatDate(this.list.form.date[0]) + ' 00:00:00'
        param.endEnterTime = formatDate(this.list.form.date[1]) + ' 23:59:59'
      }
      param = clearEmpty(param)
      return param
    }
  }
}
</script>